<template>
    <div class="ResumeStandard">
      <div class="basic_spacial">
        <div class="candidate">
          <div>
            <h1>{{resumeData.basic && resumeData.basic.name}}</h1>
            <p>
                <span>{{resumeData.basic && resumeData.basic.gender}}</span>
                <span>{{resumeData.basic && resumeData.basic.size}}岁</span>
                <span>{{resumeData.extensionFields && resumeData.extensionFields.highestedu}}</span>
            </p>
          </div>
          <div>
            <p><i class="iconfont icon-shouji"></i>{{resumeData.basic && resumeData.basic.mobile}}</p>
            <p><i class="iconfont icon-letter"></i><a class="blue">{{resumeData.basic && resumeData.basic.email}}</a></p>
          </div>
        </div>
        <div class="headerImg">
          <div @click="() => avatarUpShow = !resumeTemplates">
            <img :src="image || require(`@/assets/images/header.png`)" />
            <my-upload field="img"  @crop-success='cropSuccess' v-if="avatarUpShow" v-model="avatarUpShow" :width="100" :height="100" img-format="jpg" :noSquare="true"></my-upload>
          </div>
          <p>{{$t('candidateApplication.upload_img')}}</p>
        </div>
      </div>
      <template v-for="template in templates">
        <div v-if="template.path === 'eduExp'" :key="template.path">
          <h4 class="blue blod"><i class="iconfont icon-chengshijinglixianxing"></i>{{template.title}}</h4>
          <div v-for="(fields, i) in loGet(resumeData, template.path)" :key="i">
            <span>{{loGet(resumeData, template.path)[i]['startDate']}}-{{loGet(resumeData, template.path)[i]['endDate'] === '4000-10'? '至今' : loGet(resumeData, template.path)[i]['endDate']}} {{loGet(resumeData, template.path)[i]['school']}} {{loGet(resumeData, template.path)[i]['address']}} {{loGet(resumeData, template.path)[i]['major']}} {{loGet(resumeData, template.path)[i]['degree']}}</span><!--  1 金科路-->
          </div>
        </div>
        <div  v-else-if="template.path === 'workExp'" :key="template.path">
          <h4 class="blue blod"><i class="iconfont icon-zidingyilie"></i>{{template.title}}</h4>
          <div v-for="(fields, i) in loGet(resumeData, template.path)" :key="i">
            <h5>{{loGet(resumeData, template.path)[i].startDate}}-{{loGet(resumeData, template.path)[i].endDate === '4000-10'? '至今' : loGet(resumeData, template.path)[i].endDate}}</h5>
            <div>
              {{loGet(resumeData, template.path)[i].company}}<br/>
              {{$t('candidateApplication.responsibility_desc')}}：{{loGet(resumeData, template.path)[i].detail}}
            </div>
          </div>
        </div>
        <div :key="template.path" v-else-if="template.type === 'LIST'">
          <h4 class="blue blod"><i class="iconfont icon-zidingyilie"></i>{{template.title}}</h4>
          <div v-for="(fields, i) in loGet(resumeData, template.path)" :key="i">
            <p :class="record.type === 'TEXT_AREA' || record.type === 'RICH_TEXTAREA'? 'line' : ''" v-for="record in template.fields" :key="record.path">{{record.title}}：{{record.path === 'endDate' &&  loGet(resumeData, template.path)[i][record.path] === '4000-10' ? '至今': getValue(loGet(resumeData, template.path)[i], record.path)}}</p>
          </div>
        </div>
        <div :class="template.title === '基本信息'?'first': ''" :key="template.path" v-else>
          <h4 class="blue blod"><i class="iconfont icon-zidingyilie"></i>{{template.title}}</h4>
          <div>
            <p :class="record.type === 'TEXT_AREA' || record.type === 'RICH_TEXTAREA'? 'line' : ''" v-for="record in template.title === '基本信息'?filterField(template.fields):template.fields" :key="record.path">{{record.title}}：{{getValue(resumeData, record.fullPath)}}</p>
            <!-- <p>身份证号：1101021990051233098</p>
            <p>通讯地址：北京市东城区青龙胡同</p>
            <p>学校类别：985院校</p>
            <p>自定义：汉</p> -->
          </div>
        </div>
      </template>
      <!-- <div>
        <h4 class="blue blod"><i class="iconfont icon-qiuzhi"></i>求职意向</h4>
        <div>
          <p>期望工作类型：全职</p>
          <p>期望行业：IT服务（系统/数据/维护）</p>
          <p>期望职位：其他、软件/互联网/系统集成</p>
          <p>目前状态：我目前处于离职状态，即刻上岗</p>
          <p>期望薪资：10001-15000</p>
          <p>期望地点：北京</p>
          <p>英语等级：</p>
        </div>
      </div>
      <div>
        <h4 class="blue blod"><i class="iconfont icon-chengshijinglixianxing"></i>教育经历</h4>
        <div>
          <span>2011.09.01-2015,07,01 哈尔滨远东理工学院 北京 计算机科学与技术（应用技术） 本科 1 金科路</span>
        </div>
      </div>
      <div>
        <h4 class="blue blod"><i class="iconfont icon-zidingyilie"></i>项目经验</h4>
        <div>
          <h5>2017.12.01-12018.12.01</h5>
          <div>
            比格网络<br/>
            责任描述：主要负责购物车模块，支付模块，用户个人收藏
          </div>
        </div>
      </div> -->
    </div>
</template>
<script>
import loGet from 'lodash.get'
import myUpload from 'vue-image-crop-upload'
import { findTemplate, photoUpload } from '@/api/resume'
export default {
  name: 'ResumeStandard',
  components: { myUpload },
  props: [ 'enterpriseId', 'positionId', 'resumeData', 'id', 'resumeTemplates', 'positionInfo' ],
  data () {
    return {
      loGet,
      templates: {},
      avatarUpShow: false,
      image: ''
      // data: { // 测试时要将当前值改为resumeData
      //   eduExp: [ 1, 2, 3 ],
      //   workExp: [ 1, 2, 3 ],
      //   projectExp: [ 1, 2, 3 ]
      // }
    }
  },
  watch: {
    resumeData: {
      handler (val, oldVal) {
        if (val && JSON.stringify(val) !== '{}') {
          if (!this.resumeTemplates) {
            this.getTemplate()
          } else {
            this.templates = this.resumeTemplates
          }
          this.image = this.resumeData.basic && this.resumeData.basic.photoAddress
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    if (this.resumeData === undefined) {
      if (!this.resumeTemplates) {
        this.getTemplate()
      } else {
        this.templates = this.resumeTemplates
      }
      this.image = this.resumeData.basic && this.resumeData.basic.photoAddress
    }
  },
  methods: {
    async sendPhoto () {
      let params = {
        id: this.id,
        resumeId: this.resumeData.id,
        image: this.image
      }
      let res = await photoUpload(params)
      if (res.code === 200) {
        this.$message.success(res.message)
      } else {
        this.$message.error(res.message)
      }
    },
    cropSuccess (imgData) {
      this.image = imgData
      this.sendPhoto()
    },
    getValue (data, path) {
      let tmp = this.loGet(data, path)
      if (tmp instanceof Array) {
        tmp = tmp.map(item => item.name).join(',')
      }
      return tmp
    },
    filterField (fields) {
      return fields.filter(item => item.path !== 'name' && item.path !== 'gender' && item.path !== 'email' && item.path !== 'mobile')
    },
    async getTemplate () {
      let res = await findTemplate({ enterpriseId: this.enterpriseId, positionId: this.positionId, isRPO: this.positionInfo.isRPO || 'N' })
      if (res.code === 200) {
        // 处理表单数据并传递给页面
        this.templates = res.data.fields
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.ResumeStandard
  .blue
   color var(--blue-500)
  .blod
    font-weight bold
  .headerImg
    margin-left auto
    margin-right 100px
    >div
      background var(--light-grey)
      border-radius 50%
      overflow hidden
      border 1px solid borderColor
      padding 0!important
      img
        width 100px
        height 100px
        border-radius 50%
    p
      margin-top 12px
      color textGrey
      text-align center
  .basic_spacial
    display flex
    align-items stretch
    .candidate
      margin-bottom 30px
      h1
        font-size 36px
        font-weight bold
      >div
        display flex
        align-items baseline
        span
          display inline-block
          padding 0 12px
          border-right 1px solid borderColor
          &:last-child
            border none
        &:last-child
          line-height 28px
          margin-top 12px
          p
            margin-right 12px
            i
              margin-right 6px
  >div:not(.basic_spacial)
    line-height 28px
    margin-top 12px
    h4
      font-size 18px
      border-bottom 1px dashed borderColor
      padding-bottom 6px
      margin-bottom 12px
      .iconfont
        margin-right 6px
        font-weight normal
    h5
      padding-right 24px
    &.first
      width 60%
      margin-top 24px
    >div
      display flex
      flex-wrap wrap
      padding 6px 0
      p
        width 50%
        &.line
          width 100%
      >div
        flex 1
</style>
